<template>
  <div>
    <page-header-wrapper content="主要完成${describ}的管理">
      <Add ref="add" @ok="add"></Add>
      <Update ref="update" @ok="update"></Update>
      <Batch ref="batch" @save="batchUpdate"></Batch>
      <Info ref="info"></Info>
      <a-card>
        <Operation
          showBatchBtns
          showModeBtn
          :btns="btns"
          class="mb10"
          @add="toAdd"
          @batchClick="batchClick"
          @search="handleSearch"
          @changeMode="handleChangeMode">
          <template v-slot:right>
            <div class="tar">
              <span>父表编号：</span>
              <a-select v-model="parent.id" class="w200 mr10" @change="search">
                <a-select-option v-for="p in parentList" :key="p.id">{{ p.id }}</a-select-option>
              </a-select>
              <a-input class="w200 mr10" v-model.trim="searchStr" @pressEnter="search" placeholder="请输入查询关键字"></a-input>
              <a-button type="" @click="search"><i class="fa fa-search mr5"></i>查询</a-button>
            </div>
          </template>
        </Operation>
        <div class="wfull scroll">
          <table v-show="listMode" class="table">
            <tr class="head">
              <td class="w40"><a-checkbox v-model="ckAll" @change="ckAllChange"></a-checkbox></td>
              <#list proList as pro>
              <#if pro.listShow> 
              <td>${pro.column.comment}</td>
              </#if>
              </#list>
              <td class="w160">操作</td>
            </tr>
            <tr v-for="obj in list" :key="`obj`+obj.id">
              <td><a-checkbox v-model="obj.ck" @change="ckChange"></a-checkbox></td>
              <#list proList as pro> 
              <#if pro.listShow>
              <#if pro.formType=="switch">
              <td>{{ obj.${pro.name}?'是':'否' }}</td>
              <#elseif pro.formType=="dic">
              <td><DicHolder :code="obj.${pro.name}"/></td>
              <#elseif pro.formType=="date">
              <td>{{ obj.${pro.name} }}</td>
              <#elseif pro.formType=="datetime">
              <td>{{ obj.${pro.name} }}</td>
              <#elseif pro.formType=="time">
              <td>{{ obj.${pro.name} }}</td>
              <#elseif pro.formType=="tags">
              <td><TagViewer :array="JSON.parse(obj.${pro.name})"></TagViewer></td>
              <#elseif pro.formType=="img">
              <td><ImgHolder :width="160" :src="obj.${pro.name}"/></td>
              <#elseif pro.formType=="imgs"> 
              <td><Banner :mode="1" v-if="obj.${pro.name}" :imgs="JSON.parse(obj.${pro.name})"/></td>
              <#elseif pro.formType=="banner">
              <td><Banner v-if="obj.${pro.name}" :imgs="JSON.parse(obj.${pro.name})"/></td>
              <#elseif pro.formType=="select"||pro.formType=="radio">
              <td>{{ getOptLabel(dic.${pro.name}Opts, obj.${pro.name}) }}</td>
              <#elseif pro.formType=="checkbox">
              <td><TagViewer :array="getOptLabels(dic.${pro.name}Opts, obj.${pro.name})"></TagViewer></td>
              <#elseif pro.formType=="tinymce">
              <td><div class="w160 h120" v-html="genHtml(obj.${pro.name})"></div></td>
              <#else>
              <td>{{ obj.${pro.name} }}</td>
              </#if>
              </#if>
              </#list>
              <td>
                <div class="w120">
                  <div class="btn-circle" @click="toInfo(obj)">
                    <i class="fa fa-search"></i>
                  </div>
                  <div class="btn-circle" @click="del(obj)">
                    <i class="fa fa-trash"></i>
                  </div>
                  <div class="btn-circle" @click="toUpdate(obj)">
                    <i class="fa fa-pencil"></i>
                  </div>
                </div>
              </td>
            </tr>
          </table>
          <div class="pd24 bor-border-1" v-show="!listMode">
            <a-row :gutter="15">
              <a-col span="24">
                <div class="pd10"><a-checkbox v-model="ckAll" @change="ckAllChange">全选</a-checkbox></div>
              </a-col>
              <a-col v-for="obj in list" :key="`block`+obj.id" span="6">
                <div class="card">
                  <ImgHolder src="" :height="200"></ImgHolder>
                  <div class="pd15">
                    <table>
                      <#list proList as pro> 
                      <#if pro.listShow>
                      <#if pro.formType=="select"||pro.formType=="radio"||pro.formType=="multiple"||pro.formType=="checkbox">
                      <tr><td style="width:80px;">${pro.column.comment}</td><td>{{ getOptLabel(dic.${pro.name}Opts, obj.${pro.name}) }}</td></tr>
                      <#elseif pro.formType=="dic">
                      <tr><td style="width:80px;">${pro.column.comment}</td><td><DicHolder :code="obj.${pro.name}"/></td></tr>
                      <#else>
                      <tr><td style="width:80px;">${pro.column.comment}</td><td>{{ obj.${pro.name} }}</td></tr>
                      </#if>
                      </#if>
                      </#list>
                    </table>
                  </div>
                  <div class="foot">
                    <a-row>
                      <a-col span="6" class="tal" style="padding-left:10px;">
                        <a-checkbox v-model="obj.ck" @change="ckChange"></a-checkbox>
                      </a-col>
                      <a-col span="18" class="tar">
                        <div class="btn-circle" @click="toInfo(obj)">
                          <i class="fa fa-search"></i>
                        </div>
                        <div class="btn-circle" @click="del(obj)">
                          <i class="fa fa-trash"></i>
                        </div>
                        <div class="btn-circle" @click="toUpdate(obj)">
                          <i class="fa fa-pencil"></i>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <Page :total="total" :pageSizeInit="pageSize" @change="onPageChange"></Page>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import Add from './Add'
import Update from './Update'
import Batch from './Batch'
import Info from './Info'
import { dic } from './dic'
import { pageMixin } from '@/core/page-mixin'
export default {
  mixins: [pageMixin],
  components: {
    Add, Update, Batch, Info
  },
  data () {
    return {
      parent: { id: '0' },
      parentList: [],
      dic,
      btns: [
        { key: 1, name: '删除', icon: 'fa-remove' },
        { key: 2, name: '编辑', icon: 'fa-pencil' }
      ]
    }
  },
  mounted () {
    this.searchParent()
    // this.search()
  },
  methods: {
    searchParent () {
      if (this.parentList.length === 0) {
        this.$http.get('${baseMapping}/parent', {}, data => {
          this.parentList = data
          if (data.length > 0) {
            this.parent.id = this.parentList[0].id
            this.search()
          }
        })
      } else {
        this.search()
      }
    },
    search () {
      this.$http.get('${baseMapping}/page', {
        searchStr: this.searchStr,
        page: this.page,
        pageSize: this.pageSize,
        pid: this.parent.id
      }, data => {
        this.ckAll = false
        this.total = data.total
        this.list = data.list.map((t) => {
          t.ck = false
          return t
        })
      })
    },
    toInfo (obj) {
      this.$refs.info.init(JSON.stringify(obj))
      this.$refs.info.show(obj)
    },
    batchClick (index) {
      if (index === 1) {
        this.batchDel()
      } else if (index === 2) {
        this.toBatchUpdate()
      }
    },
    toAdd () {
      this.$refs.add.init()
      this.$refs.add.show()
    },
    add (obj) {
      this.$http.post('${baseMapping}/add', Object.assign({ pid: this.parent.id }, JSON.parse(obj)), data => {
        this.$refs.add.hide()
        this.search()
      })
    },
    toUpdate (obj) {
      this.$refs.update.init(JSON.stringify(obj))
      this.$refs.update.show()
    },
    update (obj) {
      this.$http.post('${baseMapping}/update', JSON.parse(obj), data => {
        this.$refs.update.hide()
        this.search()
      })
    },
    del (obj) {
      this.confirm(() => {
        this.$http.post('${baseMapping}/del', { ids: obj.id }, data => {
          this.search()
        })
      })
    },
    batchDel () {
      this.checkIds(ids => {
        this.$http.post('${baseMapping}/del', { ids: ids.join(',') }, data => {
          this.search()
        })
      })
    },
    toBatchUpdate () {
      this.checkIds(ids => {
        this.$refs.batch.init(ids)
        this.$refs.batch.show()
      }, '确定要批量编辑所选择的记录么')
    },
    batchUpdate (obj) {
      this.$http.post('${baseMapping}/batch', JSON.parse(obj), data => {
        this.$refs.batch.hide()
        this.search()
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
